<style lang="scss" scoped>
.head-box {
  display: flex;
  width: 100%;
  padding: 0.2rem 0.3rem;
  background-color: #ffffff;

  .avatar {
    display: flex;
    flex-basis: 30%;
    align-items: center;
    justify-content: flex-start;
  }

  .infomation {
    display: flex;
    flex-basis: 50%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 0.2rem;
    font-size: 0.28rem;

    .name {
      font-size: 0.34rem;
      padding-bottom: 0.2rem;
    }
  }

  .edit {
    display: flex;
    flex-basis: 20%;
    align-items: center;
    justify-content: flex-end;
  }
}

.income-box {
  display: flex;
  margin-bottom: 0.2rem;
  background-color: #ffffff;
  border-top: 0.01rem solid #e9e9e9;
  border-bottom: 0.01rem solid #e9e9e9;

  .block {
    display: flex;
    flex-basis: 50%;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    padding: 0.2rem 0;

    p {
      font-size: 0.32rem;
      padding: 0.1rem;

      &.info {
        color: #179afe;
        font-size: 0.38rem;
      }
    }
  }
}

.logout-box {
  position: absolute;
  bottom: 100px;
  left: 0;
  width: 100%;
  padding: 0 .2rem;
}
</style>

<template>
  <div class="container hasNav hasTabbar">
    <van-nav-bar title="个人中心" fixed />

    <div class="head-box">
      <div class="avatar">
        <van-image width="1.6rem" height="1.6rem" :src="userInfo ? fileUrl+userInfo.headpic : ''" round></van-image>
      </div>
      <div class="infomation">
        <p class="name">{{ userInfo.name || '' }}</p>
        <p>用户账号：{{ userInfo.yipenghao || '' }}</p>
      </div>
      <div class="edit" @click="$router.push('/user/infos')">
        <van-icon name="arrow" size="0.3rem" />
      </div>
    </div>

    <div class="income-box">
      <div class="block" @click="$router.push('/user/income')">
        <p>收入</p>
        <p class="info">{{income}}</p>
      </div>
      <div class="block">
        <p>评价</p>
        <p class="info">{{evaluate}}</p>
      </div>
    </div>

    <van-cell icon="manager-o" title="认证中心" is-link to="/user/infos" />
    <van-cell icon="idcard" title="银行卡" is-link to="/user/card" />
    <van-cell icon="edit" title="修改密码" is-link to="/editPassword" />
	<van-cell icon="manager-o" title="关于我们" is-link to="/common/about" />
	
    <div class="logout-box">
      <van-button type="default" color="#179AFE" block @click="logout">退出</van-button>
    </div>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

import Tabbar from '../../components/Tabbar';

import { fileUrl } from '../../api/index';
import { getIncomeNum, getEvaNum } from '../../api/user';

export default {
  name: 'OrderIndex',
  components: {
    Tabbar
  },
  data() {
    return {
      fileUrl,
      income: 0, //收入
      evaluate: 0 //评价
    };
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  async beforeMount() {
    await this.getBaseData();
  },
  methods: {
    async getBaseData() {
      try {
        let { totalAmount } = await getIncomeNum();
        let { evaluationCount } = await getEvaNum();

        this.income = totalAmount;
        this.evaluate = evaluationCount;
      } catch (error) {
        console.log(error);
      }
    },
    logout(){
      this.$store.dispatch('handleLogout');
      this.$toast('退出成功');
      this.$router.replace('/login');
    }
  }
};
</script>
